<script setup lang="ts">
import { reactive, ref } from 'vue';
import { setDefaultTemplate, getDefaultTemplate } from '@/apis/my'
import { useGetDictTypeApi } from "@/apis/order"
import { useUserStore } from '@/store/user'
import { useUserInfoApi } from "@/apis/member"

const loading = ref(true)
init()
function init(){
	getDefaultTemplate().then(res =>{
		if(res){
			form.typeId = res.typeId
			form.typeName = res.typeName
			form.cargoName = res.cargoName
			form.cargoTypeId = res.cargoTypeId
			form.cargoGrossWeight = res.cargoGrossWeight
			form.loadingAddress = res.loadingAddress
			form.unloadingAddress = res.unloadingAddress
		}
		loading.value = false
	})
	useGetDictTypeApi().then(res =>{
		orderTypeColumns.value = res.dataList
	})
}

const userStore = useUserStore()

const orderTypeEnable = ref(false)
const orderTypeColumns = ref([])

const form = reactive({
	typeId: "",
	typeName: "",
	cargoName: "",
	cargoTypeId: "",
	cargoGrossWeight: "",
	loadingAddress: "",	
	unloadingAddress: ""
}) 
const formRef = ref()

const rules = {
	
}

function orderConfirm(e){
	form.typeName = e.value[0].dictLabel
	form.typeId = e.value[0].dictValue
	orderTypeEnable.value = false
}

	
function submit(){
	// formRef.value.validate().then(valid => {
	// 	if(valid){
			
	// 	}
	// })
	uni.showLoading({
		title: "正在提交数据请稍后"
	})
	setDefaultTemplate(form).then(()=> {
		uni.hideLoading()
		uni.showToast({
			title:"提交成功",
			icon: "success"
		})
		uni.navigateBack()
	})
}
</script>

<template>
	<u-loading-page :loading="loading"/>
	<view v-if="!loading" style="padding: 10px 20px">
		<u-form :model="form" ref="formRef" :rules="rules" >
			<u-form-item
				prop="typeName"
				label="默认订单类型" 
				@click="orderTypeEnable = true" 
				label-width="100"
				borderBottom
			>
				<u-input v-model="form.typeName" border="none" placeholder="订单类型" disabled disabledColor="#ffffff">
					<template #right>
						<u-icon name="arrow-right"/>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item prop="cargoName" label="默认货物名称" borderBottom label-width="100">
				<u-input v-model="form.cargoName" border="none" placeholder="默认货物名称" height="140" />
			</u-form-item>
			<u-form-item prop="" label="货物种类" borderBottom label-width="100">
				<u-input v-model="form.cargoTypeId" border="none" placeholder="货物种类" height="140"/>
			</u-form-item>
			<u-form-item prop="cargoGrossWeight" label="默认货物毛重" borderBottom label-width="100">
				<u-input v-model="form.cargoGrossWeight" border="none" placeholder="默认货物毛重" height="140"/>
			</u-form-item>
			<u-form-item prop="loadingAddress" label="默认装货点" borderBottom label-width="100">
				<u-input v-model="form.loadingAddress" border="none" placeholder="默认装货点" height="140" />
			</u-form-item>
			<u-form-item prop="unloadingAddress" label="默认卸货点" borderBottom label-width="100">
				<u-input v-model="form.unloadingAddress" border="none" placeholder="默认卸货点" height="140"/>
			</u-form-item>
		</u-form>
		<u-picker :show="orderTypeEnable" :columns="[orderTypeColumns]" keyName="dictLabel" @confirm="orderConfirm" closeOnClickOverlay 
			@close="orderTypeEnable = false" @cancel="orderTypeEnable = false"/>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<style lang="scss">
	.width{
		width: 100rpx;
		height: 100rpx;
	}
.form {
	  margin: 0rpx 10rpx ;
	  // padding: 0 20rpx;
	  border-radius: 10rpx;
	  background-color: #fff;
	  &-item {
	    display: flex;
	    height: 46rpx;
	    // line-height: 86rpx;
	    padding: 10rpx 10rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	    // border-bottom: 1rpx solid #ddd;
	    .label {
	      width: 250rpx;
		  text-align: right;
		  margin-right: 20rpx;
	      color: #333;
	    }
	
	
	  .form-item:last-child {
	    border: none;
	  }
	}
	}
</style>
